<!--
 * @Author: 黄达全
 * @Date: 2024-08-03 17:51:59
 * @LastEditTime: 2024-08-17 23:20:34
-->
<script lang="ts" setup>
import type { ImagePageItem } from "@/common/type"
import type { PropType } from "vue"
import { reactive, ref, watch } from "vue"
import ImageApi from "@/api/model/image"
import myDialog from "./dialog.vue"
import useElementPlus from "@/hooks/useElementPlus"
const props = defineProps({
    imageList: {
        type: Object as PropType<ImagePageItem[]>,
        required: true
    },
    total: {
        type: Number,
        required: true
    },
    pageSize : {
        type: Number,
        required: true
    },
    currentPage: {
        type: Number,
        required: true
    },
    is_dialog: {
        type: Boolean,
        default: false
    }
})

// 图片数据
const data = ref<(ImagePageItem & { checked?: boolean })[]>([])
watch(() => props.imageList, (newVal) => {
    if (props.is_dialog) {
        data.value = newVal.map((item) => {
            return {
                ...item,
                checked: false
            }
        })
    } else {
        data.value = newVal
    }
})

const emits = defineEmits(["next-page", "check-add-change", "check-delete-change"])

// 切换页码
const pageChangeHandler = (page: number) => {
    console.log(props.is_dialog);

    emits("next-page", page)
}

const { message } = useElementPlus()
const deleteImage = async (id: number, url: string) => {
    const filename = url.split("/").reverse()[0]
    const { code } = await ImageApi.deleteImage(id, filename)
    if (code == 1) {
        message({
            message: "删除成功",
            type: "success"
        })
        emits("next-page")
    }
}

const renameImageForm = reactive({
    id: 0,
    name: ""
})
const dialogRef = ref()
const openRenameImageDialog = async (image: ImagePageItem) => {
    dialogRef.value.open()
    renameImageForm.id = image.id
    renameImageForm.name = image.name

}

const renameImage = async () => {
    const { code } = await ImageApi.editImage(renameImageForm)
    if (code == 1) {
        dialogRef.value.close()
        message({
            message: "修改成功",
            type: "success"
        })
        emits("next-page")
    }

}

const checkChangeHandle = (e: string | number | boolean, item: ImagePageItem) => {
    if (e) emits("check-add-change", item)
    else emits("check-delete-change", item)
}

// 初始化，取消全部状态
const init_checked = () => {
    data.value = props.imageList.map((item) => {
        return {
            ...item,
            checked: false
        }
    })
}

// 复制链接
const copyLink = (item: ImagePageItem) => {
    const link = item.url
    navigator.clipboard.writeText(link)
    message({
        message: "复制成功",
        type: "success"
    })
}

defineExpose({
    init_checked
})
</script>

<template>
    <div class="container">
        <div class="imgList">
            <div class="imgItem" :style="{ height: is_dialog ? '166px' : '186px' }" v-for="item in data" :key="item.id">
                <div class="imgBox">
                    <el-image class="img" :src="item.url" fit="cover" :max-scale="4" :min-scale="0.2"
                        :preview-src-list="[item.url]" />
                </div>
                <div class="other">
                    <el-checkbox v-model="item.checked" size="small" style="margin-right: 10px" v-if="is_dialog"
                        @change="checkChangeHandle($event, item)" />
                    <el-button size="small" type="success" link @click="copyLink(item)">复制链接</el-button>
                    <el-button size="small" type="primary" link @click="openRenameImageDialog(item)">重命名</el-button>
                    <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="el-icon-InfoFilled"
                        icon-color="#626AEF" title="是否删除此图片" @confirm="deleteImage(item.id, item.url)">
                        <template #reference>
                            <el-button size="small" type="danger" link>删除</el-button>
                        </template>
                    </el-popconfirm>
                </div>
                <div class="img_name">{{ item.name }}</div>
            </div>
        </div>
        <div class="pagination">
            <el-pagination size="small" background layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="pageSize"
                @current-change="pageChangeHandler" />
        </div>
        <my-dialog title="重命名" :width="550" ref="dialogRef" @submit="renameImage">
            <template #body>
                <el-form>
                    <el-form-item label="图片名称">
                        <el-input v-model="renameImageForm.name" placeholder="请输入图片名称" type="textarea" />
                    </el-form-item>
                </el-form>
            </template>
        </my-dialog>
    </div>
</template>

<style lang="scss" scoped>
.container {
    height: 100%;
    display: flex;
    flex-direction: column;

    .imgList {
        flex: 1;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 10px;

        .imgItem {
            width: calc(25% - 10px);
            display: flex;
            flex-direction: column;
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
            position: relative;

            &:hover {
                .img>:deep(img) {
                    transform: scale(1.2);
                }
            }

            .imgBox {
                width: 100%;
                flex: 1;
                overflow: hidden;
            }

            .img {
                width: 100%;

                &>:deep(img) {
                    transition: all 0.3s ease-in-out;
                }
            }

            .other {
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 10px;
            }

            .img_name {
                position: absolute;
                bottom: 30px;
                line-height: 18px;
                // height: 36px;
                right: 0;
                padding: 0 5px;
                left: 0;
                display: -webkit-box; // 将元素设置为WebKit内核的弹性盒子模型。
                -webkit-box-orient: vertical; // 设置弹性盒子的排列方向为垂直。
                -webkit-line-clamp: 2; // 限制显示的文本行数。
                overflow: hidden;
                background-color: rgba(114, 112, 112, 0.8);
                color: white;
                letter-spacing: 0.4px;
            }
        }
    }

    .pagination {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: var(--primary-theme-color) !important;
    color: #FFFFFF;
}

:deep(.el-form-item) {
    margin-bottom: 0;
}
</style>
